<template>
  <!-- 发现好去处 -->
  <div>
    <!-- 路由导航开始 -->
    <div class="found">
      <div>全部</div>
      <div>国庆去哪儿</div>
      <div>
        露营
        <img src="mayingshuang/imgs/star.jpg" alt />
      </div>
      <div>只看西安</div>
      <div>航空物流</div>
      <div>打卡新地</div>
    </div>
    <!-- 图片展示开始 -->
    <div class="exhibition">
      <!-- 左边小盒子开始 -->
      <div class="left">
        <!-- 遍历leftbox -->
        <div class="leftbox" v-for="(v, i) in arr" :key="i">
          <div>
            <img :src="v.imgsrc" alt />
            <p class="ditu">
              <span class="iconfont icon-ditu"></span>
              {{ v.h5 }}
              <span class="line">|</span>
              <span>7.8</span>km
            </p>
            <p class="txt">{{ v.p }}</p>
            <div class="headeport">
              <div class="le">
                <img :src="v.imgsrc" alt />
                <span>穆小乖</span>
              </div>
              <div class="ri">
                <span class="iconfont icon-dianzan" id="iconfont"></span>
                <span>2</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边大盒子开始 -->
      <div class="right">
        <!-- 遍历rightbox -->
        <div class="rightbox" v-for="(v, i) in arr" :key="i + 1">
          <div>
            <img :src="v.imgsrc2" alt />
            <p class="ditu">
              <span class="iconfont icon-ditu"></span>{{ v.h5 }}
              <span class="line">|</span>
              <span>7.8</span>km
            </p>
            <p class="txt">{{ v.p2 }}</p>
            <div class="headeport">
              <div class="le">
                <img :src="v.imgsrc2" alt />
                <span>星星椰蓉</span>
              </div>
              <div class="ri">
                <span class="iconfont icon-dianzan" id="iconfont"></span>
                <span>2</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    axios.request("http://localhost:8889/manavlist2").then((ok) => {
      console.log(ok);
      this.arr = ok.data;
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.found {
  width: 100%;
  overflow-x: auto;
  display: flex;
  // flex:1 ;
  justify-content: space-between;
  margin-top: 2.667vw;
  div {
    //   flex: 1;
    flex-shrink: 0;
    width: 20vw;
    height: 6.933vw;
    background-color: #f6f6f6;
    border-radius: 1.867vw;
    margin-left: 2.667vw;
    line-height: 6.933vw;
    text-align: center;
    font-size: 3.467vw;
    img {
      width: 2.933vw;
      height: 2.933vw;
    }
  }
  // .hs{
  //     display: flex;
  // }
}
.exhibition {
  width: 100%;
  margin-top: 4.267vw;
  display: flex;
  justify-content: space-between;
  .left {
    width: 47.467vw;
    .leftbox {
      width: 47.467vw;
      height: 71.467vw;
      // background-color: grey;
      margin-bottom: 1.333vw;
      div {
        width: 47.467vw;
        height: 64.8vw;
        position: relative;
        .ditu {
          position: absolute;
          top: 40.533vw;
          left: 1.867vw;
          color: #f6f6f6;
          .line {
            margin: 0 1.333vw;
          }
        }
        img {
          width: 47.467vw;
          height: 47.2vw;
        }
        .txt {
          width: 46.667vw;
          margin-bottom: 0.8vw;
          text-align: left;
          // overflow-wrap:warp;
        }
        .headeport {
          display: flex;
          justify-content: space-between;
          .le {
            text-align: left;
            img {
              width: 4.533vw;
              height: 4.533vw;
              border-radius: 2.4vw;
            }
            span {
              margin-left: 0.8vw;
            }
          }
          .ri {
            text-align: right;
            margin-bottom: 4vw;
          }
        }
      }
    }
  }
  .right {
    width: 48.8vw;
    .rightbox {
      width: 48.8vw;
      // background-color: blue;
      margin-bottom: 1.333vw;
      height: 85.867vw;
      div {
        width: 46.667vw;
        height: 85.867vw;
        position: relative;
        .ditu {
          position: absolute;
          top: 54.4vw;
          left: 1.867vw;
          color: #f6f6f6;
          .line {
            margin: 0 1.333vw;
          }
        }
        img {
          width: 49.333vw;
          height: 61.333vw;
        }
        .txt {
          width: 46.667vw;
          margin-bottom: 0.8vw;
          text-align: left;
          // overflow-wrap:warp;
        }
        .headeport {
          display: flex;
          justify-content: space-between;
          .le {
            text-align: left;
            img {
              width: 4.533vw;
              height: 4.533vw;
              border-radius: 2.4vw;
            }
            span {
              margin-left: 0.8vw;
            }
          }
          .ri {
            text-align: right;
          }
        }
      }
    }
  }
}
</style>